<template>  
  <view v-if="showConfirmDialog" class="confirm-dialog" @click.stop="handleClickOutside">  
    <view class="dialog-overlay" @click="handleOverlayClick"></view>  
    <view class="dialog-content">  
      <!-- <view class="dialog-title">{{ title }}</view>  -->
      <view class="dialog-message">{{ message }}</view>  
      <view class="dialog-buttons">  
		<button class="cancle" @click="handleCancelClick">{{ cancelText }}</button>  
        <button class="confirm" @click="handleConfirmClick">{{ confirmText }}</button>         
      </view>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  name: 'RetentionDialog',  
  props: {  
    showConfirmDialog: {  
      type: Boolean,  
      default: false  
    },  
    title: {  
      type: String,  
      default: '确认'  
    },  
    message: {  
      type: String,  
      default: '请确认你的操作'  
    },  
    confirmText: {  
      type: String,  
      default: '确认'  
    },  
    cancelText: {  
      type: String,  
      default: '取消'  
    }  
  },  
  methods: {  
    handleClickOutside() {  
      //this.handleCancelClick();  
    },  
    handleOverlayClick() {  
      //this.handleCancelClick();  
    },  
    handleConfirmClick() {  
      this.$emit('confirm');  
    },  
    handleCancelClick() {  
      this.$emit('cancel');  
    }  
  }  
};  
</script>  
  
<style lang="scss">  
.confirm-dialog {  
  position: fixed; 
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  z-index: 9999;  
  .dialog-overlay {
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(0, 0, 0, 0.5);  
  }  
    
  .dialog-content {  
    background-color: #FFFFFF;
    width: 540rpx;
    height:300rpx;  	
    padding: 25px;  
    border-radius: 10px;  
    z-index: 99999;
    /* 其他自定义样式 */ 
	.dialog-title {
	  /* 标题样式 */  
	}  
	  
	.dialog-message {  
	  /* 消息样式 */  
	  font-size: 28rpx;
	  text-align: center;
	  margin-bottom: 30rpx;
	}  
	  
	.dialog-buttons {  
	  display: flex;  
	  justify-content: space-between;
	  margin-top: 50rpx;
	  /* 按钮组样式 */ 
	   button {
	    flex: 1;
		width: 350rpx;
		height: 40px;
		margin-top: 10px;
		text-align: center; /* 确保文本居中，尽管这通常是默认的 */  
		font-size: 16px;
	    border-radius: 15px;  
	  }
	  .cancle{
		border: 1px solid blue; /* 设置边框宽度为2px，颜色为蓝色，样式为实线 */   
		color: #0055ff;    
	  }
	  .confirm{
		margin-left: 30rpx;
	  	background-color: #0055ff;
		color: #FFFFFF;  
	  }  
	}
  }    
}  
</style>